<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQL生成与执行工具</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.6/lib/codemirror.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.6/theme/dracula.css">
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <div class="container-fluid">
        <header class="bg-primary text-white p-3 mb-4">
            <h1 class="text-center">MySQL查询工具</h1>
        </header>
        
        <div class="row">
            <!-- 左侧表格列表 -->
            <div class="col-md-3">
                <div class="card mb-3">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">数据库表</h5>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            <div th:each="table : ${tables}" class="table-item">
                                <div class="form-check">
                                    <input class="form-check-input table-checkbox" type="checkbox" th:value="${table}" th:id="${'table-' + table}">
                                    <label class="form-check-label" th:for="${'table-' + table}" th:text="${table}"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-3" id="table-structure-card" style="display: none;">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">表结构</h5>
                    </div>
                    <div class="card-body">
                        <div id="table-structure-container"></div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧SQL生成和执行区域 -->
            <div class="col-md-9">
                <div class="card mb-3">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">通过AI生成SQL</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label for="prompt">输入你的需求（中文描述）</label>
                            <textarea id="prompt" class="form-control" rows="3" placeholder="例如：查询用户表中年龄大于30岁的用户名和邮箱"></textarea>
                        </div>
                        <button id="generate-btn" class="btn btn-primary">生成SQL</button>
                    </div>
                </div>
                
                <div class="card mb-3">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">SQL编辑器</h5>
                    </div>
                    <div class="card-body">
                        <textarea id="sql-editor"></textarea>
                        <div class="mt-3">
                            <button id="execute-btn" class="btn btn-success">执行SQL</button>
                            <button id="clear-btn" class="btn btn-warning ms-2">清空</button>
                        </div>
                    </div>
                </div>
                
                <div class="card" id="result-container" style="display: none;">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">查询结果</h5>
                    </div>
                    <div class="card-body">
                        <div id="result-info" class="mb-3"></div>
                        <div class="table-responsive">
                            <table id="result-table" class="table table-striped table-bordered">
                                <thead id="result-header"></thead>
                                <tbody id="result-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.6/lib/codemirror.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.6/mode/sql/sql.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>